﻿<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta charset="utf-8" />
        <title>jQuery UI - FISL</title>
        <link type="text/css" href="./css/jquery-ui-1.8.13.custom.css" rel="stylesheet" />
        <link type="text/css" href="./css/apresentacao.css" rel="stylesheet" />
        <script type="text/javascript" src="./js/jquery-1.5.1.min.js"></script>
        <script type="text/javascript" src="./js/jquery-ui-1.8.13.custom.min.js"></script>
        <script type="text/javascript" src="./js/jquery.ui.datepicker-pt-BR.js"></script>

        <script type="text/javascript">
            var totalSlides = 0;
            var slideAtual = 0;
            var inicializador = {};
            var ordem;
            var baixados = 1;
            var listaSlides = new Array();

            function efeitoAleatorio() {
                // Efeitos que não ficaram bons na animação: "bounce", "pulsate", "shake", "transfer".
                var efeitos = ["blind", "clip", "drop", "explode", "fade", "fold", "highlight", "scale", "slide"];
                return efeitos[Math.floor(Math.random() * efeitos.length)];
            }

            function updateView() {
                if (slideAtual == 0) {
                    $("#bt_home").fadeOut();
                    $("#bt_voltar").fadeOut();
                    $("#bt_avancar").fadeIn().val("Vamos começar");
                    $("#bt_reload").fadeOut();
                } else if (slideAtual >= 1 && slideAtual < totalSlides) {
                    $("#bt_home").fadeIn();
                    $("#bt_voltar").fadeIn();
                    $("#bt_avancar").val("Próximo").fadeIn();
                    $("#bt_reload").fadeIn();
                } else if (slideAtual == totalSlides) {
                    $("#bt_home").fadeIn();
                    $("#bt_voltar").fadeIn();
                    $("#bt_avancar").fadeOut();
                    $("#bt_reload").fadeIn();
                }

                $("#progress-box").progressbar({ value: (slideAtual / totalSlides) * 100 });
                $("#nav-info").text(slideAtual + "/" + totalSlides);
                $("#slide_" + ordem[slideAtual]).show(efeitoAleatorio());
            }

            function SlideInfo(slide) {
                var eu = this; // O this pode mudar de significado de acordo com o contexto.
                var slideFileName = ordem[slide];
                var div = null;
                var li = $("<li></li>");
                $("#indice-slides").append(li);

                function adicionaNoIndice(titulo) {
                    li.html("<a href='#'>" + slide + " - " + titulo + "</a>");
                    li.click(function() {
                        abrirSlide(slide);
                    });
                };

                function slideBaixado(conteudo) {
                    div = $("<div id='slide_" + slideFileName + "' class='slide'></div>");
                    div.html(conteudo);
                    $("#slide-box").append(div);
                    adicionaNoIndice(div.find("h3").html());
                    baixados++;
                    if (baixados == totalSlides) aplicarEfeitos();
                };

                function slideRecarregado(conteudo) {
                    div = $("#slide_" + slideFileName);
                    div.html(conteudo);
                    aplicarEfeitos();
                    updateView();
                };

                this.carregar = function() {
                    $.ajax({
                        url: "./slides/" + slideFileName + ".html",
                        isLocal: true,
                        dataType: "html",
                        success: div == null ? slideBaixado : slideRecarregado
                    });
                };

                this.carregar();
            }

            function downloadSlides() {
                $.ajax({
                    url: "./slides/ordem.json",
                    isLocal: true,
                    dataType: "json",
                    success: function(jsonDoc) {
                        // Salva o JSON com a ordem dos slides e calcula a quantidade deles.
                        ordem = jsonDoc;
                        totalSlides = ordem.length - 1;

                        // Adiciona os slides na apresentação. O slide 0 já está aqui, então começa a baixar a partir do 1.
                        for (var slidex in ordem) {
                            var slide = parseInt(slidex);
                            if (slide == 0) continue;
                            listaSlides[slide] = new SlideInfo(slide);
                        }
                        updateView();
                    }
                });
            }

            function aplicarEfeitos() {
                for (var fi in inicializador) {
                    inicializador[fi]();
                }
                $("#nav-info").text("0/" + totalSlides);
            }

            function abrirSlide(slide) {
                function callback() {
                    slideAtual = slide;
                    updateView();
                }

                $("#slide_" + ordem[slideAtual]).hide(efeitoAleatorio(), {}, 500, callback);
            }

            $(function() {
                $("#slide_0").tabs();

                // Botão de avançar.
                $("#bt_avancar").button().click(function() {
                    abrirSlide(slideAtual + 1);
                    return false;
                });

                // Botão de voltar.
                $("#bt_voltar").button().click(function() {
                    abrirSlide(slideAtual - 1);
                    return false;
                });

                // Botão HOME.
                $("#bt_home").button().click(function() {
                    abrirSlide(0);
                    return false;
                });

                // Botão recarregar.
                $("#bt_reload").button().click(function() {
                    $("#slide_" + ordem[slideAtual]).hide(efeitoAleatorio(), {}, 500, listaSlides[slideAtual].carregar);                    
                    return false;
                });

                downloadSlides();
            });
        </script>
		<script type="text/javascript">
			  var _gaq = _gaq || [];
			  _gaq.push(['_setAccount', 'UA-24352886-1']);
			  _gaq.push(['_trackPageview']);
			
			  (function() {
			    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
			    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
			    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
			  })();
		</script>         
    </head>
    <body>
        <div id="header">
            <table cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td width="30%">
                        <div id="logo"><img src="./img/logo-fisl12-reduzido.png" /></div>
                    </td>
                    <td width="40%">
                        <div id="navigator-box">
                            <div id="nav-info"></div>
                            <div id="nav-buttons">
                                <input type="button" id="bt_home" value="Home" style="display: none;" />
                                <input type="button" id="bt_voltar" value="Voltar" style="display: none;" />
                                <input type="button" id="bt_avancar" value="Vamos começar" />
                                <input type="button" id="bt_reload" value="Recarregar" style="display: none;" />
                            </div>
                        </div>
                    </td>
                    <td width="30%">
                        <div id="auth">
                            <h2>jQuery UI</h2>
                            <p>
                                Victor Williams Stafusa da Silva<br/>
                                André Luiz Pereira Álvares<br/>
                                Wesley Seidel Carvalho
                            </p>
                        </div>
                    </td>
                </tr>
            </table>
        </div>

        <div id="progress-box">
        </div>
        
        <div id="slide-box">
            <div id="slide_0">
                <ul>
                    <li><a href="#tabs-1">Autores</a></li>
                    <li><a href="#tabs-3">Índice de slides</a></li>
                </ul>
                <div id="tabs-1">
                    <h1>Esta é a apresentação de jQuery UI</h1>
                    <h2>Autores:</h2>
                    <h2>Victor Williams Stafusa da Silva - victorwssilva@gmail.com</h2>
                    <h2>André Luiz Pereira Álvares - andre2k2@gmail.com</h2>
                    <h2>Wesley Seidel Carvalho - wesley.seidel@gmail.com - @wseidel</h2>

                    <br/>
                    <h1>Documentação</h1>
                    <h2>http://jqueryui.com/</h2>

                    <br/>
                    <h1>SVN da Apresentação</h1>
                    <h2>https://apresentacao-jqueryui.googlecode.com/svn/trunk</h2>
                </div>
                <div id="tabs-3">
                    <div>
                        <h1>Índice de slides:</h1>
                        <h2>Escolha:</h2>
                        <ul id="indice-slides">
                        </ul>
                    </div>
                </div>
            </div>

            <!-- Outros slides são acrescentados aqui. -->
        </div>
    </body>
</html>
